<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DataTable表格的Demo</title>
		<!-- 引入jQuery -->
		<script src="../../lib/jq/jquery-1.11.3.min.js" type="text/javascript"></script>
		
		<script src="../../lib/data-table/js/jquery.dataTables.min.js" type="text/javascript" ></script>
		
		<link href="../../lib/data-table/css/jquery.dataTables.min.css"  rel="stylesheet"  />
		
	</head>
	<body>
		<button id="getSelected">得到选中的行</button>
		<button id="getAll">得到所有的行</button>
		<!-- 
			要显示表头并且使用DataTable的效果必须写完整的表格结构
			<table>
				<thead>
					<tr>
						<th></th>
					</tr>
				</thead>
				必须有
				<tbody>	
				</tbody>
			</table>
		-->
		<table id="tab">
			<thead>
			<tr>
				<th><input type="checkbox" value="全选" ></th><th>姓名</th><th>年龄</th><th>性别</th><th>工资</th><th>等级</th><th>类型</th>
			</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
	</body>
	<script>
		var rows = [
	    	{name:"bart",age:"18",gender:"man",salary:"10000.00",level:"小辈",type:"0" },
	    	{name:"lisa",age:"15",gender:"women",salary:"15000.00",level:"小辈",type:"2" },
	    	{name:"maggie",age:"10",gender:"women",salary:"20000.00",level:"小辈",type:"1" },
	    	{name:"homer",age:"38",gender:"man",salary:"13000.00",level:"长辈",type:"1" },
	    	{name:"marge",age:"38",gender:"women",salary:"16000.00",level:"长辈",type:"2" },
	    	{name:"bart",age:"18",gender:"man",salary:"10000.00",level:"小辈",type:"0" },
	    	{name:"lisa",age:"15",gender:"women",salary:"15000.00",level:"小辈",type:"2" },
	    	{name:"maggie",age:"10",gender:"women",salary:"20000.00",level:"小辈",type:"1" },
	    	{name:"homer",age:"38",gender:"man",salary:"13000.00",level:"长辈",type:"1" },
	    	{name:"marge",age:"38",gender:"women",salary:"16000.00",level:"长辈",type:"2" },
	    	{name:"bart",age:"18",gender:"man",salary:"10000.00",level:"小辈",type:"0" },
	    	{name:"lisa",age:"15",gender:"women",salary:"15000.00",level:"小辈",type:"2" },
	    	{name:"maggie",age:"10",gender:"women",salary:"20000.00",level:"小辈",type:"1" },
	    	{name:"homer",age:"38",gender:"man",salary:"13000.00",level:"长辈",type:"1" },
	    	{name:"marge",age:"38",gender:"women",salary:"16000.00",level:"长辈",type:"2" }
	    ]
		// 全局异常配置,当请求出错后处理方式:
		// throw: 抛出异常
		// alter: 弹框
		// none: 什么都不做
//		$.fn.dataTable.ext.errMode = 'none'; 
		
		// 作为一个函数使用的话可以自定义自己的异常处理
		// settings: datatable的配置信息
		// techNote: 错误代码,官网查询https://datatables.net/tn/{techNote}
		// message: 异常信息
		$.fn.dataTable.ext.errMode = function(settings,techNote,message){
			console.log("--- $.fn.dataTable.ext.errMode 全局异常处理函数 start ---");
			console.log("settings :",settings);
			console.log("techNote :",techNote);
			console.log("message :",message);
			console.log("--- $.fn.dataTable.ext.errMode 全局异常处理函数 start ---");
		}
		
		$(function(){
			var table = $("#tab")
				.on('init.dt', function() { // 表格填充完毕之后调用
			        console.log( '表格填充完成 on("init.dt",function(){ //...} : '+new Date().getTime() );
			    })
				.on('error.dt', function ( e, settings, techNote, message ) {
			        console.log( 'An error has been reported by DataTables: ', message );
			    })
				// ajax完成加载后调用
				.on('xhr.dt', function ( e, settings, json, xhr ) {
					console.log("ajax完成加载后调用:",json);
			    })
				.DataTable({
					ajax: {
						url: "/xxx/xxx",
						dataSrc: "rowList", // 返回的JSON的表格数组list
						data: {name: 'bart'}, // 调用接口的请求参数
					},
					data: rows,
					columns: [ // 配置表头
						{
							data: null,// 当data的值为null或者undefined的时候会使用defaultContent的值
							defaultContent: '<input type="checkbox" value="">',
							visible: true,
							render: function(data, type, row, meta){
								console.log("render start ...")
//								console.log(data) 
								console.log(type)
//								console.log(row)
//								console.log(meta)
								console.log("render stop ...")
							}
						},
						{data:"name"},
						{data:"age"},
						{data:"gender"},
						{data:"salary"},
						{data:"level"},
						{data:"type"}
					],
					"pagingType": "full_numbers",
					// 表格填充完后的回调函数,触发时机早于init.dt
					"initComplete": function(settings,json){ 
						console.log("--- 表格加载完毕 initComplete start ---");
						console.log(settings,json)
						console.log("--- 表格加载完毕 initComplete end ---");
					}
				})
				
			
			
			
			
			//给行绑定选中事件
	        $('#tab tbody').on( 'click', 'tr', function () {
	            if ($(this).hasClass('selected')) {
	                $(this).removeClass('selected');
	            }
	            else {
	                table.$('tr.selected').removeClass('selected');
	                $(this).addClass('selected');
	            }
	        } );
	        
	        //给按钮绑定点击事件
	        $("#getSelected").click(function() {
	            var column1 = table.row('.selected').data().name;
	            var column2 = table.row('.selected').data().age;
	            console.log("得到的行:",table.row('.selected').data());
	            alert("第一列内容："+column1 + "；第二列内容： " + column2);
	        });
	        
	        $("#getAll").click(function(){
	        	let data = table.tables().body().rows().data();
	        	console.log(" ---  得到所有的表格数据 start ---");
	        	console.log(data);
	        	console.log(" ---  得到所有的表格数据 stop ---");
	        })
			
		})
		
	</script>
</html>
